<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>任务详情</title>
<%@ include file="/include/mobilelibs.jsp"%>
<script type="text/javascript" charset="utf-8">
	mui.init();
</script>
<style>
.bg {
	background-color: #FFFFFF !important;
}

/**/
				.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			
			.mui-preview-loading.mui-active {
				display: block;
			}
			
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=e9ICdBVcGY1GQqIQ8QwmhVKDMKwMyMzq"></script>
<script type="text/javascript">
	function changeStatus(vl) {
		$("#status").val(vl);
	}
	  $(function () {
	  	   mui.previewImage({
				openCallback: function(index, ele){
				
					
				}
			});
	  	
	  	
	        $.get("getJsApiConfigParams.json?url=" + encodeURIComponent(location.href.split('#')[0]), function (params) {
	            if(params && params["appId"]){
	                wx.config({
	                    debug: false,
	                    appId: params["appId"],
	                    timestamp: params["timestamp"],
	                    nonceStr: params["nonceStr"],
	                    signature: params["signature"],
	                    jsApiList: [
	                        'checkJsApi',
	                        'onMenuShareTimeline',
	                        'onMenuShareAppMessage',
	                        'onMenuShareQQ',
	                        'onMenuShareWeibo',
	                        'scanQRCode',
	                        'chooseImage',
	                        'uploadImage'
	                    ]
	                });
	            }
	        });
	        
	        setTimeout( function(){
	        		var status='${status}';
	        		if(status ==0){
	        			$("#pickup").css("visibility","visible");
	        		}
	        }
	        ,2000);
	    })
</script>
</head>

<body>

	<%--<header class="mui-bar mui-bar-nav">--%>
		<%--<h1 class="mui-title list">任务详情</h1>--%>
	<%--</header>--%>
	<form method="post" class="form-horizontal"  action="<c:url value="/updateStatus.json" />"
		id="taskForm">
		<input type="hidden" name="userId" value="${userId}"> <input
			type="hidden" name="id" value="${id}"> <input type="hidden"
			id="status" name="status" value="${status}"> <input type="hidden"
			id="location" name="location" value="${location}"> 
			<input type="hidden" id="latitude" name="latitude" value="${latitude}"> 
			<input type="hidden" id="longitude" name="longitude" value="${longitude}"> 
		<div class="mui-content ">
			<div class="detailTop">
				<div class="topLeft">
					<p class="topTitle">[${taskType}] ${pt.taskName }</p>
					<p class="topTime1">开始时间： ${pt.startTime }</p>
					<p class="topTime2">结束时间： ${pt.endTime }</p>
					<p class="topStore">门店： ${store.storeName }</p>
					<p class="topPlace">地址： ${store.storeAddress }</p>
				</div>
				<div class="topRight">
					<p>${pt.rewardName}</p>
				</div>
			</div>
			<div class="request">
				<span>任务要求</span>
			</div>
			<div class="requestText">
				<div class="text">
					${pt.taskRequire } </span>
				</div>
			</div>
			<div class="request2">
				<span>任务指引</span>
			</div>
			<div class="detailFooter">
				<div class="footerFont">${pt.taskGuidanceWords }</div>
				<div class="DetailImg">
					<c:forEach var="imageUrl" items="${pt.imagesList}"
						varStatus="status">
						<img style="width: 150px; height: 150px;" src="${imageUrl}" data-preview-src="" data-preview-group="1">
					</c:forEach>
				</div>
			</div>
			<div id="btn">
				<c:if test="${status=='0'}">
					<button class="mui-btn mui-btn-primary detailBtn " id="pickup"
						onmousedown="changeStatus(0)" style="visibility:hidden" >抢单</button>
				</c:if>
				<c:if test="${status=='2'}">
					<button class="mui-btn mui-btn-success mui-btn-outlined detailBtn1"
						onmousedown="changeStatus(1)">放弃</button>
					<button class="mui-btn mui-btn-success mui-btn-outlined detailBtn2"
						onmousedown="changeStatus(2)">签到并执行</button>
				</c:if>
                <c:if test="${status=='1'}">
					<script type="text/javascript">
					   layer.alert("该任务已被抢单,请重新抢单"); 
					</script>
				</c:if>
			</div>

		</div>

	</form>
	
	<script type="text/javascript">
	 //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
    var curWwwPath = window.document.location.href;
    //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
    var pathName = window.document.location.pathname;
    //21
    var pos = curWwwPath.indexOf(pathName);
    //获取主机地址，如： http://localhost:8083
    var localhostPaht = curWwwPath.substring(0, pos);


    wx.ready(function () {
        //获取地理位置
        wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                var speed = res.speed; // 速度，以米/每秒计
                var accuracy = res.accuracy; // 位置精度
                $("#latitude").val(latitude);
                $("#longitude").val(longitude);
                //通过百度地图获取地理位置
                var point = new BMap.Point(longitude,latitude);
                var geoc = new BMap.Geocoder();
                geoc.getLocation(point, function(rs){
                    var addComp = rs.addressComponents;
                    var address ="";
                    if(null != addComp.streetNumber && "" !=addComp.streetNumber){
                    	address =  addComp.province + "-" + addComp.city + "-" + addComp.district + "-" + addComp.street + "-" + addComp.streetNumber ;
                    }else {
                    	address =  addComp.province + "-" + addComp.city + "-" + addComp.district + "-" + addComp.street  ;
                    }
                    $("#location").val(address);
                });
            },
            cancel: function (res) {
                alert('用户拒绝授权获取地理位置');
            }
        });
       
    });

     wx.error(function(res){
         console.log(res);
     });
	   
	</script>
</body>

</html>